<template>
  <div>
    <div class="m-content">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="teacherName">
          <el-input v-model="ruleForm.teacherName"></el-input>
        </el-form-item>
        <!-- 标题 -->
        <el-form-item label="教授科目" prop="subject">
          <el-input v-model="ruleForm.subject"></el-input>
        </el-form-item>

        <!-- 分类 -->
        <el-form-item label="毕业院校" prop="school">
          <el-input v-model="ruleForm.school"></el-input>
        </el-form-item>

        <!-- 摘要 -->
        <el-form-item label="研究领域" prop="profession">
          <el-input v-model="ruleForm.profession"></el-input>
        </el-form-item>
        <!-- 内容 -->
        <el-form-item label="个人简介" prop="introduce">
          <mavon-editor v-model="ruleForm.introduce"></mavon-editor>
        </el-form-item>

<!--        <el-form-item label="登录Id" prop="loginId">
          <el-input v-model="ruleForm.loginId" placeholder="登录Id"></el-input>
        </el-form-item>-->

        <!-- 图片 URL -->
        <el-form-item label="图片链接" prop="actUrls">
          <el-input v-model="ruleForm.actUrls" placeholder="输入图片链接"></el-input>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeacherEdit",
  data() {
    return {
      ruleForm: {
        id: '',
        teacherName:"",
        subject: "",
        school: "",
        profession: "",
        loginId: '',
        introduce: "",
        actUrls: "",

      },
      rules: {
        subject: [
          { required: true, message: '请输入科目', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请输入院校', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ],
        profession: [
          { required: true, message: '请输入专业', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入简介', trigger: 'blur' },
          { min: 0, max: 500, message: '长度在 0 到 500 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          // 动态设置 creator
          console.log(_this.$store.getters.getUser.username)
          this.ruleForm.creator = _this.$store.getters.getUser.username;
          console.log("1111111111111111111111111111222222222222222")
          console.log(this.ruleForm)
          this.$axios.post('/manager-teacher/teacher/edit', this.ruleForm, {
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
            console.log(res);
            _this.$alert('操作成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                _this.$router.push("/admin/teacher");
              }
            });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },

  created() {
    const teacherId = this.$route.params.teacherId;
    const _this = this;

    if (teacherId) {
      this.$axios.get('/manager-teacher/teacher/' + teacherId, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        const teacher = res.data.data;
        Object.assign(_this.ruleForm, teacher);
      });
    }
  }

}
</script>

<style scoped>
.m-content {
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
</style>